<template>
  <div>
    <banner></banner>
    <div class="contactInfo">
      <p class="title">
        <span>*</span>请留下你的联系方式，您提交完问卷后可参与抽奖，中奖后工作人员会第一时间联系您！
      </p>
      <div class="infoContent">
        <p>
          <label for>姓名:</label>
          <input type="text" v-model="username" />
        </p>
        <p>
          <label for>电话:</label>
          <input type="text" v-model="phoneNum" />
        </p>
        <p>
          <label for>性别:</label>
          <radio-group>
            <label v-for="(item,index) in gender" :key="index" @click="mysex(item)">
              <radio :value="item" />
              <span>{{item}}</span>
            </label>
          </radio-group>
        </p>
        <p>
          <span>出生日期:</span>
          <picker
            mode="date"
            :value="currentdata"
            start="1990-01-01"
            end="2020-01-01"
            @change="bindPickerChange"
          >
            <div class="picker">{{currentdata}}</div>
          </picker>
        </p>
      </div>
    </div>
    <button type="primary" @click="upLoad">提交</button>
  </div>
</template>

<script>
import banner from "@/components/questionBanner.vue";
export default {
  data() {
    return {
      currentdata: "2000-09-01",
      username: "",
      phoneNum: "",
      gender: ["男", "女"],
      sex: ""
    };
  },
  components: {
    banner
  },
  methods: {
    bindPickerChange(e) {
      console.log("picker发送选择改变，携带值为", e.mp.detail.value);
      this.currentdata = e.mp.detail.value;
      console.log(this.currentdata);
    },
    mysex(item) {
      // console.log(item);
      this.sex = item;
    },
    upLoad() {
      switch (false) {
        case new RegExp(/^[a-zA-Z0-9_-]{1,8}$/).test(this.username):
          wx.showToast({
            title: "用户名在1-8个英文字符之间"
          });
          break;
        case new RegExp(/^1[34578]\d{9}$/).test(this.phoneNum):
          wx.showToast({
            title: "请填写正确的手机号"
          });
          break;
        case !this.sex == "":
          console.log(this.sex);
          wx.showToast({
            title: "请填写您的性别"
          });
          break;
        default:
          this.$http
            .post(
              "/addHdInfogiftlog",
              {
                questionnaireId: 2,
                name: this.username,
                sex: this.sex,
                birthday: this.currentdata,
                tel: this.phoneNum,
                cause: this.cause,
                lesson: this.course,
                advantage: this.advantage,
                place: this.ordius,
                changee: this.opinion,
                satiafaction: this.six,
                negativeComment: this.yuanyin,
                education: this.professors,
                current:this.isfresh
              }
            )
            .then(res => {
              console.log(res);
            });
          mpvue.navigateTo({ url: "../prize/main" });
      }
    }
  },
  created() {},
  onLoad() {}
};
</script>

<style scoped>
.contactInfo {
  margin: 15px;
}
.contactInfo .title {
  font-size: 16px;
}
.contactInfo .title span:nth-child(1) {
  color: red;
}
.infoContent {
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  height: 150px;
  justify-content: space-between;
}
.infoContent p {
  display: flex;
  width: 70%;
  /* justify-content: space-between; */
  align-items: center;
  font-size: 16px;
}
.infoContent p input {
  flex: 7;
  border: 1px solid #ecf0f1;
  border-radius: 5px;
}
.infoContent label {
  flex: 2;
}
.infoContent radio-group,
.infoContent ._picker {
  flex: 7;
}
.infoContent radio-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.infoContent ._picker {
  border: 1px solid #ecf0f1;
  margin-left: 30px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
button {
  width: 45%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
</style>
